<%@ page contentType="text/html;charset=UTF-8" language="java" import="com.lee.dhsg.domain.Student" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
    Student student = (Student) session.getAttribute("StudentSession");
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/messages_zh.js"></script>
    <link rel="stylesheet" href="css/other.css"/>
</head>
<style>
    #visit-class-list .navbar-nav {
        position: relative;
    }

    #visit-class-list .navbar-nav ul {
        position: absolute;
    }

    .student-index {
        position: relative;
        width: 100%;
        height: 900px;
    }

    #student-course {
        position: absolute;
        width: 100%;
        height: 900px;
    }

    #student-info {
        position: absolute;
        width: 100%;
        height: 500px;
        display: none;
    }

    #student-comment {
        position: absolute;
        width: 100%;
        height: 500px;
        display: none;
    }

    #student-asking {
        position: absolute;
        width: 100%;
        height: 500px;
        display: none;
    }

    #student-collection {
        position: absolute;
        width: 100%;
        height: 500px;
        display: none;
    }

    #student-mark {
        position: absolute;
        width: 100%;
        height: 500px;
        display: none;
    }

    .user-background div {
        text-align: center;
        margin: 20px auto;
    }

    .friendship {
        width: 100%;
        height: 400px;
        background-color: #3C3C3C;
    }

    #student-info .col-lg-7 {
        position: relative;
    }

    /*#user-information .col-lg-7 .user-info_1{position: absolute;width: 100%;height: 500px;}*/
    #student-info .col-lg-7 .user-info_2 {
        position: absolute;
        width: 100%;
        height: 500px;
        margin-top: 30px;
    }

    #flip1, #flip2, #flip3, #flip4, #flip5, #flip6 {
        padding: 15px;
        padding-left: 25px;
        text-align: left;
        cursor: pointer;
        border: solid 1px #c3c3c3;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #666666;
    }

    #panel1, #panel2, #panel3, #panel4, #panel5, #panel6 {
        padding: 5px;
        text-align: left;
        border: solid 1px #c3c3c3;
        font-family: "微软雅黑";
        font-size: 15px;
        color: #444444;
    }

    #panel1, #panel2, #panel3, #panel4, #panel5, #panel6 {
        display: none;
    }

    tr {
        height: 70px;
    }

    td {
        padding-top: 30px;
        text-align: left;
        vertical-align: middle !important;
    }

    #panel1 .row {
        margin-top: 10px;
    }

    #panel1 .row .col-lg-2, .col-lg-1, .col-lg-4 {
        vertical-align: middle !important;
        text-align: center;
        line-height: 30px;
    }

    .user-info_2 #panel2 .row {
        margin-top: 10px;
    }

    .user-info_2 #panel2 .row .col-lg-2, .col-lg-1, .col-lg-4 {
        vertical-align: middle !important;
        text-align: center;
        line-height: 30px;
    }

    .user-info_2 #panel3 .row {
        margin-top: 10px;
    }

    .user-info_2 #panel3 .row .col-lg-2, .col-lg-1, .col-lg-4 {
        vertical-align: middle !important;
        text-align: center;
        line-height: 30px;
    }

    .user-info_2 #panel4 .row {
        margin-top: 10px;
    }

    .user-info_2 #panel4 .row .col-lg-2, .col-lg-1, .col-lg-4 {
        vertical-align: middle !important;
        text-align: center;
        line-height: 30px;
    }

    .user-info_2 #panel5 .row {
        margin-top: 10px;
    }

    .user-info_2 #panel5 .row .col-lg-2, .col-lg-1, .col-lg-4 {
        vertical-align: middle !important;
        text-align: center;
        line-height: 30px;
    }

    .user-info_2 #panel6 .row {
        margin-top: 10px;
    }

    .user-info_2 #panel6 .row .col-lg-2, .col-lg-1, .col-lg-4 {
        vertical-align: middle !important;
        text-align: center;
        line-height: 30px;
    }

</style>
<body>

<!--主页模态窗-->
<div>
    <!--登陆选择身份-->
    <div class="container">
        <div class="modal fade" id="Mymodal-1">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4>你的身份是？</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <ul class="nav navbar-nav navbar-collapse">
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-teacher-login"
                                       data-dismiss="modal">老师</a></li>
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-student-login"
                                       data-dismiss="modal">学生</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--注册选择身份-->
    <div class="container">
        <div class="modal fade" id="Mymodal-2">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4>你的身份是？</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <ul class="nav navbar-nav navbar-collapse">
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-teacher-signup"
                                       data-dismiss="modal">老师</a></li>
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-student-signup"
                                       data-dismiss="modal">学生</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--老师登陆 -->
    <div class="container">
        <div class="modal fade" id="Mymodal-teacher-login">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="teacherLogin" action="teacherLogin" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>老师</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--学生登陆-->
    <div class="container">
        <div class="modal fade" id="Mymodal-student-login">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="studentLogin" action="studentLogin" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>学生</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名/手机/邮箱</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--老师注册-->
    <div class="container">
        <div class="modal fade" id="Mymodal-teacher-signup">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="teacherRegister" action="teacherRegister" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>老师</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名/手机/邮箱</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 学生注册-->
    <div class="container">
        <div class="modal fade" id="Mymodal-student-signup">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="studentRegister" action="studentRegister" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>学生</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名/手机/邮箱</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--导航模块-->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index" class="navbar-brand">大好时光</a>
        </div>
        <div class="navbar-collapse collapse">
            <div class="input-append">
                <form name="courseofSearchofS" action="courseofSearchofS" method="post">
                    <input class="span2" id="appendedInputButton" type="text" name="courseName">
                    <button class="btn">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <%
                        if (student != null) {
                    %>
                    <li>
                        <img src="<%=student.getIcon()%>" class="img-circle"/>
                    </li>
                    <li><%=student.getUsername()%> ! 你好啊！喝茶还是喝咖啡？</li>
                    <li><a href="studentLogout">退出登陆</a></li>
                    <%
                    } else {
                    %>
                    <li class="divider-vertical"></li>
                    <li><a href="#" data-toggle="modal" data-target="#Mymodal-1">登陆</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#" data-toggle="modal" data-target="#Mymodal-2">注册</a></li>
                    <%
                        }
                    %>
                </ul>
            </div>
        </div>
    </div>
</nav>

<%
    if (student != null) {
%>
<!--链接模块-->
<div class="container">
    <div class="row">
        <ul class="breadcrumb" id="breadcrumb">
            <li><a href="#" id="submit_student-info">个人信息</a> <span class="divider"></span></li>
            <li><a href="#" id="submit_student-course">我的课程</a> <span class="divider"></span></li>
            <li><a href="#" id="submit_student-comment">我的评论</a> <span class="divider"></span></li>
            <li><a href="#" id="submit_student-asking">我的问答</a> <span class="divider"></span></li>
            <li><a href="#" id="submit_student-mark">我的笔记</a> <span class="divider"></span></li>
            <li><a href="#" id="submit_student-collection">我的收藏</a> <span class="divider"></span></li>
        </ul>
    </div>
</div>
<%
    }
%>

<!--  学生主页模块-->
<div class="container student-index">
    <!--课程首页模块-->
    <div class="row" id="student-course">
        <!--轮播模块-->
        <div id="myCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <%-- 轮播 --%>
                <%
                    String lunboclassname = "item active";
                    int count = 1;
                    String lunboalt = "第一张";
                %>
                <c:forEach items="${lunboList}" var="lunbo" varStatus="st">
                    <div class="<%=lunboclassname%>">
                        <img src="${lunbo.address}" alt="<%=lunboalt%>"/>
                    </div>
                    <%
                        lunboclassname = "item";
                        count += 1;
                        if (count == 2) {
                            lunboalt = "第二张";
                        } else if (count == 3) {
                            lunboalt = "第三张";
                        }
                    %>
                </c:forEach>
            </div>
            <a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
            <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
        </div>
        <!--二级分类-->
        <nav class="navbar" id="visit-class-list">
            <div class="container">
                <div class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <%-- 一级和二级类别 --%>
                        <c:forEach items="${firstCategories}" var="firstCategorie" varStatus="st">
                            <li class="nav-menu"><a
                                    href="courseofCategoryDetailofS?&categoryId=${firstCategorie.categoryid}">${firstCategorie.name}</a>
                                <ul>
                                    <c:forEach items="${secondCategories.get(st.count-1)}" var="secondCategorie"
                                               varStatus="st">
                                        <li>
                                            <a href="courseofCategoryDetailofS?&categoryId=${secondCategorie.categoryid}">${secondCategorie.name}</a>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </nav>

        <%
            if (student != null) {
        %>
        <!--已购买课程模块-->
        <div class="container">
            <div class="row" style="border-bottom: 1px #CCCCCC solid;margin-bottom: 20px;">
                <h2>已购买课程</h2>
            </div>
            <div class="row">
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
            </div>
        </div>
        <%
            }
        %>

        <!--推荐课程模块-->
        <div class="container">
            <div class="row" style="border-bottom: 1px #CCCCCC solid;margin-bottom: 20px;">
                <h2>推荐课程</h2>
            </div>
            <div class="row">
                <%-- 展示推荐的课程 --%>
                <c:forEach items="${courses}" var="course" varStatus="st">
                    <a href="courseDetailofS?&courseid=${course.courseid}">
                        <div class="col-md-3">
                            <img src="${course.img}"/>
                            <h3>${course.cname}</h3>
                            <p>${course.courseDescription}</p>
                        </div>
                    </a>
                </c:forEach>
            </div>
        </div>

        <!--推荐教师模块-->
        <div class="container">
            <div class="row" style="border-bottom: 1px #CCCCCC solid;margin-bottom: 20px;">
                <h2>推荐教师</h2>
            </div>
            <div class="row">
                <%-- 展示推荐的教师 --%>
                <c:forEach items="${teachers}" var="teacher" varStatus="st">
                    <div class="col-lg-3">
                        <img src="${teacher.icon}" class="img-circle"/>
                        <h3>${teacher.username}</h3>
                        <p>${teacher.description}</p>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
    <!--学生个人信息-->
    <div class="row" id="student-info">
        <div class="col-lg-1"></div>
        <div class="row">
            <div class="user-background">
                <div>
                    <img src="img/播放器UI/bg.jpg" class="img-circle"/>
                </div>
                <div>
                    <strong>Mr.LEE</strong>
                </div>
                <!--<div>
                    <button class="btn  btn-info" type="button" id="user-info_2">安全设置</button>
                </div>-->
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-2">昵称:</div>
                <div class="col-lg-4">
                    Mr.Lee
                </div>
                <div class="col-lg-2 text-right">
                    <form>
                        <div>
                            <a>修改</a>
                        </div>
                    </form>
                </div>
                <div class="col-lg-4">修改后次日生效</div>
            </div>
            <div class="row">
                <div class="col-lg-2">性别:</div>
                <div class="col-lg-4">
                    男
                </div>
                <div class="col-lg-2 text-right">
                    <form>
                        <div>
                            <a>修改</a>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2">生日:</div>
                <div class="col-lg-3">
                    <select class="form-control">
                        <option>1991</option>
                        <option>1992</option>
                        <option>1993</option>
                        <option>1994</option>
                        <option>1995</option>
                        <option>1996</option>
                        <option>1997</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                        <option>2005</option>
                    </select>
                </div>
                <div class="col-lg-1">年</div>
                <div class="col-lg-2">
                    <select class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                    </select>
                </div>
                <div class="col-lg-1">月</div>
            </div>
            <div class="row">
                <div class="col-lg-2">电话:</div>
                <div class="col-lg-4">
                    1300000000
                </div>
                <div class="col-lg-2 text-right">
                    <form>
                        <div>
                            <a>修改</a>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2">头像:</div>
                <div class="col-lg-4">
                    <img src="img/实例图片.jpg"/>
                </div>
                <div class="col-lg-2 text-right">
                    <form>
                        <div>
                            <a>修改</a>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <div class="container">
            <div class="col-lg-7">
                <div class="row user-info_2">
                    <div id="flip2">密码修改</div>
                    <div id="panel2">
                        <div class="row">
                            <div class="col-lg-2">原密码:</div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">新密码:</div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">重复新密码:</div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-2">
                                <form>
                                    <button type="button" class="btn btn-primary btn-block">确认修改</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="flip3">手机绑定</div>
                    <div id="panel3">
                        <div class="row">
                            <div class="col-lg-2">手机号:</div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="name">
                            </div>
                            <div class="col-lg-2">
                                <form>
                                    <button type="button" class="btn btn-primary btn-block">发送验证码</button>
                                </form>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">验证码:</div>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" id="name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-2">
                                <form>
                                    <button type="button" class="btn btn-primary btn-block">确认绑定</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!--<div id="panel4">
                       <div class="row">
                           <div class="col-lg-1"></div>
                              <div class="col-lg-2">
                                  <form>
                                      <button type="button" class="btn btn-primary btn-block">选择图像</button>
                                  </form>
                              </div>
                              <div class="col-lg-8">
                                     <small>请上传jpg、png格式，640*640像素，5M以下图片，头像修改后部分页面次日生效</small>
                              </div>
                       </div>
                       <div class="row">
                              <div class="col-lg-1"></div>
                              <div class="col-lg-5">
                                    <img src="img/demo_header.jpg" />
                              </div>
                              <div class="col-lg-3">
                                    <img src="img/demo_header_circle.jpg" class="img-circle"/>
                              </div>
                       </div>
                       <div class="row">
                              <div class="col-lg-2"></div>
                              <div class="col-lg-2">
                                  <form>
                                      <button type="button" class="btn btn-primary btn-block">确认修改</button>
                                  </form>
                              </div>
                      </div>
                    </div>-->
                    <div id="flip5">邮箱绑定</div>
                    <div id="panel5">
                        <div class="row">
                            <div class="col-lg-2">邮箱:</div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="name">
                            </div>
                            <div class="col-lg-2">
                                <form>
                                    <button type="button" class="btn btn-primary btn-block">发送验证码</button>
                                </form>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">验证码:</div>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" id="name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-2">
                                <form>
                                    <button type="button" class="btn btn-primary btn-block">确认绑定</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="flip6">实名认证</div>
                    <div id="panel6">
                        <div class="row">
                            <div class="col-lg-2">身份证号：</div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="name">
                            </div>
                            <div class="col-lg-2">
                                <form>
                                    <button type="button" class="btn btn-primary btn-block">确认绑定</button>
                                </form>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--学生评论模块-->
    <div class="row" id="student-comment">
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的评论</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的评论</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的评论</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的评论</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的评论</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
    </div>
    <!-- 学生问答模块-->
    <div class="row" id="student-asking">
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的问答</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>用户的问题用户的问题用户的问题用户的问题用户的问题用户的问题
                            用户的问题用户的问题用户的问题用户的问题用户的问题</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的问答</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>用户的问题用户的问题用户的问题用户的问题用户的问题用户的问题
                            用户的问题用户的问题用户的问题用户的问题用户的问题</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的问答</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>用户的问题用户的问题用户的问题用户的问题用户的问题用户的问题
                            用户的问题用户的问题用户的问题用户的问题用户的问题</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的问答</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>用户的问题用户的问题用户的问题用户的问题用户的问题用户的问题
                            用户的问题用户的问题用户的问题用户的问题用户的问题</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的问答</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>用户的问题用户的问题用户的问题用户的问题用户的问题用户的问题
                            用户的问题用户的问题用户的问题用户的问题用户的问题</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
    </div>
    <!--学生笔记模块-->
    <div class="row" id="student-mark">
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的笔记</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的笔记</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的笔记</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的笔记</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-8">
                    <p>我的笔记</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案笔记文案</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 text-center">
                <form>
                    <button class="btn btn-primary">详情</button>
                </form>
            </div>

        </div>
    </div>
    <!-- 学生收藏模块-->
    <div class="row" id="student-collection">
        <div class="container">
            <div class="row" style="border-bottom: 1px #CCCCCC solid;margin-bottom: 20px;">
                <h3>我收藏的课程</h2>
            </div>
            <div class="row">
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/11.png"/>
                    <h3>课程名称</h3>
                    <p>课程描述课程描述课程描述</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row" style="border-bottom: 1px #CCCCCC solid;margin-bottom: 20px;">
                <h3>我收藏的教师</h2>
            </div>
            <div class="row">
                <div class="col-lg-3">
                    <img src="img/实例图片.jpg" class="img-circle"/>
                    <h3>教师名字</h3>
                    <p>不可描述的教师</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/实例图片.jpg" class="img-circle"/>
                    <h3>教师名字</h3>
                    <p>不可描述的教师</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/实例图片.jpg" class="img-circle"/>
                    <h3>教师名字</h3>
                    <p>不可描述的教师</p>
                </div>
                <div class="col-lg-3">
                    <img src="img/实例图片.jpg" class="img-circle"/>
                    <h3>教师名字</h3>
                    <p>不可描述的教师</p>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    $(window).scroll(function () {
        if ($(".navbar").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav");
        }
    })
    $(function () {

        $('.carousel-control').css('line-height', $('.carousel-inner img').height() + 'px');
        $(window).resize(function () {
            var $height = $('.carousel-inner img').eq(0).height() ||
                $('.carousel-inner img').eq(1).height() ||
                $('.carousel-inner img').eq(2).height();
            $('.carousel-control').css('line-height', $height + 'px');
        })
    })
    $(function () {
        $('#myCarousel').carousel({
            interval: 3000,
        })
    })

    $('#myModal').modal().css({
        'margin-top': function () {
            return ($(this).height() * 0.5);
        }
    });

    $(function () {
        $("#submit_student-course").click(function () {
            $("#student-course").show();
            $("#student-info").hide();
            $("#student-comment").hide();
            $("#student-asking").hide();
            $("#student-mark").hide();
            $("#student-collection").hide();
        })
        $("#submit_student-info").click(function () {
            $("#student-course").hide();
            $("#student-info").show();
            $("#student-comment").hide();
            $("#student-asking").hide();
            $("#student-mark").hide();
            $("#student-collection").hide();
        })
        $("#submit_student-comment").click(function () {
            $("#student-course").hide();
            $("#student-info").hide();
            $("#student-comment").show();
            $("#student-asking").hide();
            $("#student-mark").hide();
            $("#student-collection").hide();
        })
        $("#submit_student-asking").click(function () {
            $("#student-course").hide();
            $("#student-info").hide();
            $("#student-comment").hide();
            $("#student-asking").show();
            $("#student-mark").hide();
            $("#student-collection").hide();
        })
        $("#submit_student-mark").click(function () {
            $("#student-course").hide();
            $("#student-info").hide();
            $("#student-comment").hide();
            $("#student-asking").hide();
            $("#student-mark").show();
            $("#student-collection").hide();
        })
        $("#submit_student-collection").click(function () {
            $("#student-course").hide();
            $("#student-info").hide();
            $("#student-comment").hide();
            $("#student-asking").hide();
            $("#student-mark").hide();
            $("#student-collection").show();
        })
        $("#user-info_1").click(function () {
            $(".user-info_1").show();
            $(".user-info_2").hide();
        })
        $("#user-info_2").click(function () {
            $(".user-info_1").hide();
            $(".user-info_2").show();
        })
        $("#flip1").click(function () {
            if ($("#panel2").length > 0 || $("#panel3").length > 0 || $("#panel4").length > 0 || $("#panel5").length > 0 || $("#panel6").length > 0) {
                $("#panel2").slideUp("fast");
                $("#panel3").slideUp("fast");
                $("#panel4").slideUp("fast");
                $("#panel5").slideUp("fast");
                $("#panel6").slideUp("fast");
                $("#panel1").slideToggle("fast");
            }
        });
        $("#flip2").click(function () {
            if ($("#panel1").length > 0 || $("#panel3").length > 0 || $("#panel4").length > 0 || $("#panel5").length > 0 || $("#panel6").length > 0) {
                $("#panel1").slideUp("fast");
                $("#panel3").slideUp("fast");
                $("#panel4").slideUp("fast");
                $("#panel5").slideUp("fast");
                $("#panel6").slideUp("fast");
                $("#panel2").slideToggle("fast");
            }
        });
        $("#flip3").click(function () {
            if ($("#panel1").length > 0 || $("#panel2").length > 0 || $("#panel4").length > 0 || $("#panel5").length > 0 || $("#panel6").length > 0) {
                $("#panel1").slideUp("fast");
                $("#panel2").slideUp("fast");
                $("#panel4").slideUp("fast");
                $("#panel5").slideUp("fast");
                $("#panel6").slideUp("fast");
                $("#panel3").slideToggle("fast");
            }
        });
        $("#flip4").click(function () {
            if ($("#panel1").length > 0 || $("#panel2").length > 0 || $("#panel3").length > 0 || $("#panel5").length > 0 || $("#panel6").length > 0) {
                $("#panel1").slideUp("fast");
                $("#panel2").slideUp("fast");
                $("#panel3").slideUp("fast");
                $("#panel5").slideUp("fast");
                $("#panel6").slideUp("fast");
                $("#panel4").slideToggle("fast");
            }
        });
        $("#flip5").click(function () {
            if ($("#panel1").length > 0 || $("#panel2").length > 0 || $("#panel3").length > 0 || $("#panel4").length > 0 || $("#panel6").length > 0) {
                $("#panel1").slideUp("fast");
                $("#panel2").slideUp("fast");
                $("#panel3").slideUp("fast");
                $("#panel4").slideUp("fast");
                $("#panel6").slideUp("fast");
                $("#panel5").slideToggle("fast");
            }
        })
        $("#flip6").click(function () {
            if ($("#panel1").length > 0 || $("#panel2").length > 0 || $("#panel3").length > 0 || $("#panel4").length > 0 || $("#panel6").length > 0) {
                $("#panel1").slideUp("fast");
                $("#panel2").slideUp("fast");
                $("#panel3").slideUp("fast");
                $("#panel4").slideUp("fast");
                $("#panel5").slideUp("fast");
                $("#panel6").slideToggle("fast");
            }
        });
        $(function () {
            $(".nav-menu").mouseover(function () {
                $(this).children("ul").show()
            })
            $(".nav-menu").mouseout(function () {
                $(this).children("ul").hide()
            })

        })


        $(function () {
            $(".nav-menu").mouseover(function () {
                $(this).children("ul").show()
            })
            $(".nav-menu").mouseout(function () {
                $(this).children("ul").hide()
            })

        })
    })
</script>
</html>


